import React, {FC} from 'react';
import { TinyColor } from '@ctrl/tinycolor';
import { Button, ConfigProvider } from 'antd';
import style from './ButtonProject.module.scss';

const colors = ['#fcb360', '#ff9a44', '#ef9d43', '#e37948'];

const getHoverColors = (colors: string[]) =>
  colors.map((color) => new TinyColor(color).lighten(5).toString());
const getActiveColors = (colors: string[]) =>
  colors.map((color) => new TinyColor(color).darken(5).toString());


const ButtonProject:FC<{
  title: string,
  size?: 'large' | 'middle' | 'small',
}> = ({
  title,
  size,
}) => {
  return (
    <ConfigProvider
      theme={{
        components: {
          Button: {
            colorPrimary: `linear-gradient(90deg,  ${colors.join(', ')})`,
            colorPrimaryHover: `linear-gradient(90deg, ${getHoverColors(colors).join(', ')})`,
            colorPrimaryActive: `linear-gradient(90deg, ${getActiveColors(colors).join(', ')})`,
            lineWidth: 0,
          },
        },
      }}
    >
      <div className={style.button}>
        <Button
          className={style.button}
          type="primary"
          size={size}
        >
          <p className={style.button__title}>
            {title}
          </p>
        </Button>
      </div>
    </ConfigProvider>
  );
};

export default ButtonProject;
